
<template>
  <el-card style="margin-bottom: 20px">
    <template>
      <div>
        <el-form :disabled='disabled' :inline="true" class="demo-form-inline">
          <el-form-item label="一级分类">
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in categorty1"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类">
            <el-select
              v-model="value2"
              :disabled="!Boolean(value1)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in categorty2"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="三级分类">
            <el-select
              v-model="value3"
              :disabled="!Boolean(value2)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in categorty3"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-card>
</template>

<script>
export default {
  name: "Categorysearch",
  props:['disabled'],
  data() {
    return {
      categorty1: [],
      categorty2: [],
      categorty3: [],
      value1: "",
      value2: "",
      value3: "",
    };
  },
  watch: {
    value1(value) {
      this.value2 = "";
      this.categorty2 = [];
      this.$nextTick(async () => {
        const { data } = await this.$api.getCategory2(value);
        data.forEach((v) => (v.value = v.name));
        this.categorty2 = data;
      });
    },
    value2(value) {
      this.value3 = "";
      this.categorty3 = [];
      value !== "" &&
        this.$nextTick(async () => {
          const { data } = await this.$api.getCategory3(value);
          data.forEach((v) => (v.value = v.name));
          this.categorty3 = data;
        });
    },
   value3(value) {
      this.$emit('categoryChange',{
          c1:this.value1,
          c2:this.value2,
          c3:this.value3,
      })
   }
  },
  async created() {
    const { data } = await this.$api.getCategory1();
    data.forEach((v) => (v.value = v.name));
    this.categorty1 = data;
  },
};
</script>

<style scoped>
</style>
